<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器</title>
    <style>
        #box {
            background-image: linear-gradient(120deg, #d1fa84 0%, #8fd3f4 100%);
            width: 500px;
            height: 420px;
            margin: auto;
            margin-top: 200px;
            position: relative;
        }

 .reckon {
          width: 285px;
    height: 248px;
    background-image: linear-gradient(120deg, #ce237b 0%, #b89f24 100%);
    position: absolute;
    top: 64px;
    left: 100px;
    border: 5pxsolid #2a2b2c
        }

        #input1 {
            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
            border: none;
            width: 220px;
            height: 8px;
            float: right;
            margin-top: 10px;
            margin-right: 20px;
            outline: none;
            padding: 10px
        }

        ul li {
            float: left;
            list-style: none;
            margin: 4px 2px;
            border-radius: 3px;
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
            cursor: pointer;
            color: #fff;
            font-weight: "楷体";
            width: 50px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        ul {
            margin-top: 64px;
        }

        ul li:hover {
            opacity: 0.7;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="reckon" id="reckon">
            <input type="text" id="input1">
            <ul>
                <li class="num">7</li>
                <li class="num">8</li>
                <li class="num">9</li>
                <li class="opcr">+</li>

                <li class="num">4</li>
                <li class="num">5</li>
                <li class="num">6</li>
                <li class="opcr">- </li>

                <li class="num">1</li>
                <li class="num">2</li>
                <li class="num">3</li>
                <li class="opcr">*</li>

                <li class="num">0</li>
                <li id="returnZero">C</li>
                <li id="resule">=</li>
                <li class="opcr">/</li>
            </ul>
        </div>


    </div>
<!-- 隐藏 影响美观-->
    <input type="text" id="text1" style="display:none">
    <input type="text" id="per" style="display:none">

    <script>
        lis = document.querySelectorAll("#box ul .num")
        opcr = document.querySelectorAll("#box ul .opcr")
        for (var i = 0; i < lis.length; i++) { 
            lis[i].onclick = function () {
                input1.value += parseInt(this.innerHTML)
            }
        }


        for (let i = 0; i < opcr.length; i++) {
            opcr[i].onclick = function () {
              
              for(let j=0;j<opcr.length;j++){
                if(i===j) opcr[j].style.color="red";//按钮颜色改变
                else  opcr[j].style.color="#fff";
              }
                if (text1.value == "") {
                    text1.value = input1.value
                    input1.value = ""       
                    per.value = this.innerHTML; 
                } else {
                  per.value = this.innerHTML;  //防止用户更改符号
                    text1.value = eval(text1.value + per.value + input1.value)
                    per.value = this.innerHTML;
                    input1.value = ""
                }
            }
        }
     
        resule.onclick = function () {
            input1.value = eval(text1.value + per.value + input1.value)
            per.value = ""  
            text1.value = ""

        }
      
        returnZero.onclick = function () {
            input1.value = ""
            per.value = ""
            text1.value = ""
            opcr.forEach(e => {
              e.style.color="#fff";//按钮颜色恢复
            });
            
        }
    </script>
</body>
</html>
